<template>
  <div class="container">

    <el-card style="width: 100%;">

      <el-form ref="form" :inline="true" label-position="left" size="mini">

        <el-form-item label="节点:">
          <div>{{ currentNode.host }}</div>
        </el-form-item>

        <el-form-item label="数据集:">

          <el-select
            v-model="dataSelectCondition"
            style="min-width: 130px; width: 60%; margin-right: 10px"
            clearable
            filterable
            placeholder="请选择数据集"
          >
            <el-option
              v-for="item in dataSelects"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="算法:">
          <el-select
            v-model="queriesSelectCondition"
            style="width: 180px;"
            clearable
            filterable
            placeholder="请选择算法"
          >
            <el-option
              v-for="item in queriesSelects"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="startTrain()">开始训练</el-button>
        </el-form-item>

      </el-form>

      <el-divider />

      <div style="background: #f5f5f5; margin: 20px 0; border-radius: 4px; padding: 10px;">
        <div>训练历史</div>
        <div class="table_container">
          <!--                    <el-table border header-align="center">-->
          <!--                        <el-table-column prop="key" label="训练开始时间" align="center">-->
          <!--                        </el-table-column>-->
          <!--                        <el-table-column prop="before" label="训练结束时间" align="center">-->
          <!--                        </el-table-column>-->
          <!--                        <el-table-column prop="after" label="训练结果" align="center">-->
          <!--                        </el-table-column>-->
          <!--                    </el-table>-->
        </div>
      </div>

    </el-card>

  </div>
</template>

<script>

import { startTrain } from '../../api/api'

export default {
  name: 'Train',
  data() {
    return {
      currentNode: {},
      queriesSelectCondition: undefined,
      dataSelectCondition: undefined,
      queriesSelects: [
        { label: '当前负载', value: '0' },
        { label: 'TPC-H', value: '1' },
        { label: 'TPC-C', value: '2' },
        { label: 'JOB', value: '3' }
      ],
      dataSelects: [
        { label: '当前数据集', value: '0' },
        { label: 'TPC-H', value: '1' },
        { label: 'TPC-C', value: '2' },
        { label: 'JOB', value: '3' }
      ]
    }
  },
  mounted() {
    this.currentNode = JSON.parse(this.$route.params.item)
  },
  methods: {
    startTrain() {
      const param = { server_id: this.currentNode.server_id }
      startTrain(param).then((res) => {
      }).catch((err) => {
        console.error(err)
      })
    }

  }
}
</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        flex-direction: column;
    }

    .el-divider--horizontal {
        margin: 0 20px;
    }

    .table_container {
        padding: 10px;
    }

    .chart_title {
        width: 100%;
        height: 30px;
        font-size: 16px;
        font-weight: bold;
        color: #666666;
        text-align: center;
        line-height: 30px;
    }

    .chart_container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>

